<template>
  <div id="app">
    <el-container>
      <el-header>
        <span>当前页面：haha</span>
        <el-button type="primary" @click="saveAll">保存</el-button>
      </el-header>

      <el-container>
        <el-aside>
          <!-- 素材侧边栏 -->
          <el-menu default-active="1" class="el-menu-vertical-demo">
            <el-submenu
              :index="index.toString()"
              v-for="(item, index) in submenuList"
              :key="index"
            >
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{ item.title }}</span>
              </template>
              <el-menu-item-group>
                <div class="menu-group">
                  <el-menu-item
                    @click="add"
                    :index="index + '-' + index1"
                    v-for="(item1, index1) in item.subChild"
                    :key="index1"
                    :type="item1.type"
                  >
                    <i :class="item1.icon"></i>
                    <span>{{ item1.title }}</span>
                  </el-menu-item>
                </div>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>

        <!-- 右侧主体区域 -->
        <el-main>
          <div class="phone-container">
            <div class="phone-status" style="height: 20px">
              <img
                src="//yun.duiba.com.cn/developer_new/images/new/creditShop/phone_status_bar.png"
                alt=""
              />
            </div>
            <div class="phone-header">
              <div class="phone-header-left">
                <i class="el-icon-arrow-left"></i>
              </div>
              <div>haha</div>
              <div class="phone-header-right"><i class="el-icon-more"></i></div>
            </div>
            <div class="phone-content">
              <!-- <div class="content-item" style="height:50px; padding:10px; ">
                <div style="background:#ccc; height:30px"></div>
              </div> -->
              <Draggable
                :animation="300"
                id="draggable"
                v-model="dragList"
                @sort="sort"
              >
                <div
                  :class="[
                    'content-item',
                    activeIndex == index ? 'active-item' : '',
                  ]"
                  v-for="(item, index) in dragList"
                  :key="index"
                >
                  <!-- 删除气泡确认框 -->
                  <el-popconfirm
                    title="确认删除此模块吗？"
                    @confirm="del(index)"
                  >
                    <i
                      class="el-icon-error"
                      v-show="index == activeIndex"
                      slot="reference"
                    ></i>
                  </el-popconfirm>

                  <!-- 样式弹出框 -->
                  <el-popover
                    trigger="manual"
                    placement="right-start"
                    width="400"
                    v-model="item.popoverVisible"
                  >
                    <!-- 组件Edit展示区 -->
                    <div :is="item.type+'Edit'" :content='item.content' :listIndex='index'></div>
                    <div
                      style="min-height: 50px; padding: 10px"
                      @click="handleClick(index)"
                      slot="reference"
                    >
                      <div :is="item.type" :content="item.content" ></div>
                    </div>
                  </el-popover>
                </div>
              </Draggable>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
import Draggable from "vuedraggable";
import Carousel from "./components/Carousel/Carousel";
import ImgAlone from "./components/imgAlone/imgAlone";
import CarouselEdit from "./components/Carousel/CarouselEdit"
import ImgAloneEdit from "./components/imgAlone/ImgAloneEdit"
import componentData from "./componentData/componentData";


export default {
  components: {
    Draggable,
    Carousel,
    ImgAlone,
    CarouselEdit,
    ImgAloneEdit
  },
  data() {
    return {
      activeIndex: 0,
    };
  },
  computed: {
    // 组件展示数据, 这种表示是因为draggable排序行为生成新数组，能够触发set
    dragList: {
      get() {
        return this.$store.state.dragList;
      },
      set(val){
        this.$store.commit('dragAfter',val)
      }
    },
    // 侧边栏渲染数据
    submenuList() {
      return this.$store.state.submenuList;
    },
  },
  methods: {
    // 拖拽排序之后
    sort(e) {
      console.log(e);
    },
    // 增加展示组件
    add(e) {
      this.activeIndex = this.dragList.length;
      this.$store.commit("adddragList", componentData[e.$attrs.type]());
    },
    // 点击使区域高亮
    handleClick(index) {
      this.activeIndex = index;
      if (this.dragList[index].popoverVisible) {
        return;
      } else {
        this.$store.commit("changedragList", index);
      }
    },
    // 删除dragList此区域组件
    del(index) {
      this.activeIndex = index == this.dragList.length - 1 ? index - 1 : index;
      this.$store.commit("deldragList", index);
    },

    // 保存全部的展示组件
    saveAll(){
      let defaultFlag=true
      // 遍历判断是否所有表单校验通过
      this.dragList.forEach((item,index)=>{
        if(defaultFlag){
          defaultFlag=defaultFlag && item.content.validate
        }
        else{
          return
        }
      })
      // 通过则提交draglist所有数据
      if(defaultFlag){
        this.$message.success('保存成功')
        console.info('页面保存成功');
        console.log(this.dragList);
      }
      else{
        this.$message.warning('请完成每一项的填写')
      }
    }
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
#app {
  padding: 0 200px;
  background: #fcfcfc;
  .el-header {
    background: #fafafa;
    font: 16px/60px "";
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    .el-button {
      height: 40px;
    }
  }
  .el-aside {
    border-right: 1px #ccc solid;
    padding: 20px;
    .menu-group {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
    }
    .el-menu-item {
      width: 50%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      padding: 0 !important;
      min-width: 0%;
      height: 70px;
    }
    // .el-menu-item:hover{
    //   color: #409EFF !important;
    // }
  }
  .el-main {
    background: #fff;
    padding: 50px 0 0 200px;
    .phone-container {
      width: 375px;
      height: 751px;
      box-shadow: 0 0 5px #ccc;
      overflow-y: auto;
      overflow-x: hidden;
      .phone-header {
        display: flex;
        justify-content: space-between;
        background: #e6e6e6;
        .phone-header-left {
          width: 30px;
          padding: 0 10px;
          text-align: center;
        }
        .phone-header-right {
          width: 30px;
          padding: 0 10px;
          text-align: center;
        }
      }
      .phone-content {
        .content-item {
          // animation: 300;
          position: relative;
          i {
            font: 16px/16px "";
            position: absolute;
            right: -2px;
            top: -2px;
            cursor: pointer;
          }
        }
        .content-item:hover {
          border: 1px greenyellow dashed;
        }
        .active-item {
          border: 1px greenyellow dashed;
        }
      }
    }
  }
}
</style>